<template>
	<view class='shop-cart'>
		<template v-if='list.length > 0'>
			<!--自定义导航栏-->
			<uniNavBar title='购物车' :right-text='  isNavBar?"完成":"编辑"   ' fixed='true' status-bar='true'
				@clickRight='  isNavBar = !isNavBar  '></uniNavBar>

			<!--商品内容-->
			<view class='shop-list'>
				<view class='shop-item' v-for='(item,index) in list' :key='index'>
					<label class="radio">
						<radio value="" color="#FF3333" :checked="item.checked" @tap='selectItem(index)' /><text></text>
					</label>
					<image class='shop-img' :src="item.imgUrl" mode=""></image>
					<view class='shop-text'>
						<view class='shop-name'>{{item.name}}</view>
						<view class='shop-color f-color'>{{item.color}}</view>
						<view class='shop-price'>
							<view>¥{{item.pprice}}</view>
							<template v-if='!isNavBar'>
								<view>×{{item.num}}</view>
							</template>

							<template v-else>
								<uniNumberBox :value='item.num' min='1' @change='changeNumbers($event,index,item)'>
								</uniNumberBox>
							</template>
						</view>
					</view>
				</view>
			</view>
			<!--底部-->
			<view class='shop-foot'>
				<label class="radio foot-radio">
					<radio value="" color='#FF3333' :checked="cartStore.checkAll" @tap='changeNumber' /><text>全选</text>
				</label>
				<template v-if='!isNavBar'>
					<view class='foot-total'>
						<view class='foot-count'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
						<view class='foot-num' @tap="goConfirmOrder">结算({{totalCount.num}})</view>
					</view>
				</template>
				<template v-else>
					<view class='foot-total'>
						<view class='foot-num' @tap="delGoods">删除</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<uniNavBar title='购物车' status-bar='true' fixed='true'></uniNavBar>
			<view class='shop-else-list'>
				<view class="iconfont icon-24gl-cartFull8"></view>
				<text>哦！购物车空空如也~~~</text>
			</view>
		</template>
		<Tabbar cureentPage='cart'></Tabbar>
	</view>
</template>

<script setup>
	import Tabbar from '@/components/common/Tabbar.vue'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import $http from '@/common/api/request.js'
	import {
		onShow,onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	import {
		usecartStore
	} from '@/store/cart.js'
	import {
		userorderStore
	} from '@/store/order.js'
	import {
		storeToRefs
	} from 'pinia'
	const cartStore = usecartStore()
	const orderStore = userorderStore()
	const {
		list,
		totalCount
	} = storeToRefs(cartStore)
	const {
		initOrder
	} = storeToRefs(orderStore)
	onShow(()=>{
		getData()
	})
	const getData = ()=>{
		$http.request({
			url:"/selectCart",
			method:"POST",
			header:{
				token:true
			}
		}).then((res)=>{
			cartStore.initGetData(res);
		}).catch(()=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
		})
	}
	const isNavBar = ref(false)
	// 点击全选
	const changeNumber = () => {
		cartStore.changeNumber()
	}
	// 单选
	const selectItem = (index) => {
		cartStore.selectItem(index)
	}
	//删除
	const delGoods = () => {
		cartStore.delGoods()
		cartStore.unCheckAlls()
	}
	//购物车编辑增加
	const changeNumbers = (value, index, item) => {
		if( item.num == value ) return;
			$http.request({
				url:"/updateNumCart",
				method:"POST",
				header:{
					token:true
				},
				data:{
					goodsId:item.goods_id,
					num:value
				}
			}).then((res)=>{
				cartStore.list[index].num = value;
			}).catch(()=>{
				uni.showToast({
					title:'请求失败',
					icon:'none'
				})
			})
		
	}
	const goConfirmOrder = () => {
		if( cartStore.selectList.length === 0 ){
				return uni.showToast({
					title:"请至少选择一件商品",
					icon:"none"
				})
			}
			let newList = [];
			cartStore.list.forEach(item=>{
					cartStore.selectList.filter(v=>{
							if( item.id == v ){
									newList.push( item );
							}
					})
			})
			$http.request({
				url:"/addOrder",
				method:"POST",
				header:{
					token:true
				},
				data:{
					arr:newList
				}
			}).then((res)=>{
				console.log(res);
				if( res.success ){
					//存储订单号
					orderStore.initOrder( res.data[0].order_id );
					//跳转页面
					uni.navigateTo({
						url:`../confirm-order/confirm-order?detail=${JSON.stringify(cartStore.selectList)}`
					})
				}
			}).catch(()=>{
				uni.showToast({
					title:'请求失败',
					icon:'none'
				})
			})
	}
</script>
<style scoped>
	.shop-list {
		padding-bottom: 100rpx;
	}

	.shop-else-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #F7F7F7;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.iconfont {
		font-size: 250rpx;
	}

	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #F7F7F7;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-text {
		flex: 1;
		padding-left: 20rpx;
	}

	.shop-color {
		font-size: 24rpx;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: 2rpx solid #F7F7F7;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 120rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.foot-radio {
		padding-left: 20rpx;
	}

	.foot-total {
		display: flex;
	}

	.foot-count {
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
	}

	.foot-num {
		background-color: #49BDFB;
		color: #FFFFFF;
		padding: 0 60rpx;
		line-height: 100rpx;
	}
</style>